<template>
  <div class="selecet-route">
    <span class="drop-show" title="点击收起" @click="showContent = !showContent"></span>
    <!-- 搜索框 -->
    <div class="select-search">
      <div class="input-logo" @click="hideRoute">
        <!-- <img src="~img/images/back_route.png" alt="" /> -->
      </div>
    </div>
    <!-- 内容1 -->
    <div class="select-condition">
      <div class="input-start">
        <input type="text" placeholder="" v-model="startAddress" />
        <div class="img-start">
          <!-- <img src="~img/images/yuan_start.png" alt="" /> -->
        </div>
      </div>
      <div class="input-end">
        <input
          type="text"
          placeholder=""
          :value="endAddress.d2CorpName ? endAddress.d2CorpName : endAddress.creditName"
          disabled="disabled"
        />
        <div class="img-end">
          <!-- <img src="~img/images/yuan_end.png" alt="" /> -->
        </div>
      </div>
      <!-- <div class="input-button">
        <div>取消</div>
        <div @click="drawRoute">确定</div>
      </div> -->
    </div>
    <!-- 内容2 -->
    <div class="select-detail" v-if="false">
      <div class="amap-top">
        <div class="amap-top-left">
          <p class="body-name">
            {{ endAddress.d2CorpName ? endAddress.d2CorpName : endAddress.creditName }}
          </p>
          <div class="amap-second">
            <p class="amap-type">
              {{ endAddress.scale ? endAddress.scale : endAddress.creditType }}
            </p>
            <p class="amap-type">
              {{ endAddress.corpKey ? endAddress.corpKey : endAddress.companyId }}
            </p>
          </div>
          <div class="body-address">
            <!-- <span>{{ endAddress.distance }}km |</span> -->
            <span>{{ endAddress.d2Dom ? endAddress.d2Dom : endAddress.address }}</span>
            <span></span>
          </div>
        </div>
        <div class="amap-route" onclick="amapMarkerMoreEndFun()"></div>
      </div>
      <div class="body-label-right" v-if="endAddress.score">
        <span>评分：</span>
        <span>{{ endAddress.rating ? endAddress.totalscore : '' }} </span>
        <span>{{ endAddress.rating ? endAddress.rating : endAddress.totalscore }}</span>
      </div>
      <div class="amap-bottom">联系电话：{{ endAddress.phone }}</div>
      <div class="amap-bottom">邮箱地址：{{ endAddress.email }}</div>
    </div>
  </div>
</template>

<script>
// import { copy } from '@/common/js/utils.js';
export default {
  name: 'Selecetroute',
  components: {},
  props: {
    endAddress: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  data() {
    return {
      selectObj: null,
      showContent: true,
      searchContent: '',
      selectIndex: null,
      startAddress: '创新工场'
    };
  },

  watch: {
    bankList() {}
  },

  mounted() {
    this.drawRoute();
  },

  methods: {
    hideRoute() {
      this.$emit('hideRoute');
    },
    drawRoute() {
      const routeInfo = {
        startInfo: {
          longitude: 120.681605,
          latitude: 31.322302
        },
        endInfo: {
          longitude: this.endAddress.longitude,
          latitude: this.endAddress.latitude
        },
        type: this.endAddress > 5 ? 'car' : 'people'
      };
      this.$emit('drawRoute', routeInfo);
    }
  }
};
</script>

<style lang="scss" scoped>
/*滚动条*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}
/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
  /*width: 10px;*/
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(32, 61, 129);
  &:hover {
    background-color: rgb(140, 140, 140);
  }
}
.selecet-route {
  .drop-show {
    margin-left: 12px;
    color: #0db0e2;
    cursor: pointer;
  }
  .content-item {
    line-height: 26px;
    P {
      &:first-of-type {
        margin-top: 42px;
        font-size: 40px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #dbf3ff;
      }
      &:last-of-type {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #0db7fe;
      }
    }
  }
  .select-search {
    height: 50px;
    width: 423px;
    margin-left: 30px;
    input {
      height: 50px;
      width: 423px;
      background: none;
      border: none;
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      // @include font_color('fontColor1');
      padding-left: 50px;
      outline: none;
    }
    ::-webkit-input-placeholder {
      // @include font_color('fontColor1');
    }
    .search-icon {
      position: absolute;
      right: 30px;
      top: 139px;
      z-index: 222;
      cursor: pointer;
      img {
        width: 18px;
        height: 18px;
      }
    }
    .input-logo {
      position: absolute;
      left: 0;
      top: 113px;
      z-index: 222;
      cursor: pointer;
      img {
        width: 66px;
        height: 66px;
      }
    }
  }
  .select-condition {
    margin-top: 19px;
    width: 445px;
    height: 159px;
    background: #ffffff;
    border: 2px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    border-radius: 15px;
    text-align: center;
    .input-start {
      position: relative;
      width: 426px;
      height: 62px;
      margin: 0 auto;
      margin-top: 10px;
      display: flex;
      align-items: center;
      // background-image: url(~img/images/input_start.png);
      background-repeat: no-repeat;
      background-size: cover;
      input {
        height: 50px;
        width: 423px;
        background: none;
        border: none;
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        // @include font_color('fontColor1');
        padding-left: 50px;
        outline: none;
      }
      ::-webkit-input-placeholder {
        // @include font_color('fontColor1');
      }
      .img-start {
        position: absolute;
        top: 22px;
        left: 17px;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
    .input-end {
      position: relative;
      width: 426px;
      height: 62px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      // background-image: url(~img/images/input_start.png);
      background-repeat: no-repeat;
      background-size: cover;
      input {
        height: 50px;
        width: 423px;
        background: none;
        border: none;
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        // @include font_color('fontColor1');
        padding-left: 50px;
        outline: none;
      }
      ::-webkit-input-placeholder {
        // @include font_color('fontColor1');
      }
      .img-end {
        position: absolute;
        top: 22px;
        left: 17px;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
    .input-button {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      div {
        width: 119px;
        height: 39px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        cursor: pointer;
        &:first-of-type {
          background: #eaeeef;
          color: #353536;
        }
        &:last-of-type {
          background: #1985f3;
          color: #ffffff;
        }
      }
    }
  }
  .select-detail {
    margin-top: 27px;
    width: 445px;
    height: 387px;
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    border-radius: 15px;
    padding: 24px 24px 0 12px;
    .amap-top {
      width: 417px;
      // height: 100px;
      border-bottom: 1px solid #d8dadb;
      padding-left: 10px;
      padding-bottom: 6px;
      display: flex;
      .amap-top-left {
        width: 343px;
        // height: 100px;
      }
      .amap-route {
        width: 60px;
        height: 60px;
      }
      .body-name {
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        // @include font_color('fontColor5');
      }
      .body-address {
        margin-top: 10px;
        display: flex;
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          &:first-of-type {
            // @include font_color('fontColor7');
            color: #1985f3;
            // width: 46px;
          }
          &:nth-of-type(2) {
            // @include font_color('fontColor8');
            margin-left: 5px;
            width: 260px;
          }
          &:last-of-type {
            margin-left: auto;
            // @include font_color('fontColor8');
          }
        }
      }
      .amap-second {
        width: 100%;
        display: flex;
      }
      .amap-type {
        margin-top: 10px;
        background: #dbedff;
        border-radius: 4px;
        font-size: 12px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1985f3;
        padding: 2px 6px;
        &:last-of-type {
          margin-left: 10px;
          background-color: #fff;
        }
      }
    }
    .body-label-right {
      margin-top: 8px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      span {
        font-family: Source Han Sans SC;
        &:first-of-type {
          // margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          // @include font_color('fontColor7');
        }
        &:nth-of-type(2) {
          font-size: 16px;
          font-weight: 400;
          color: #da4f38;
        }
        &:last-of-type {
          margin-left: 5px;
          font-size: 16px;
          font-weight: 400;
          color: #da4f38;
          background-color: rgba(0, 88, 179, 0.12);
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }
    .amap-bottom {
      margin-top: 9px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #6b6b6b;
    }
    // > i {
    //   font-size: 17px;
    //   font-weight: bold;
    //   color: #ff9900;
    //   margin-left: 10px;
    //   cursor: pointer;
    // }
  }
}
</style>
